<template>
  <div class="body">
    <div
      ref="card"
      v-for="(data, index) in commodname"
      :key="index"
      class="message"
  
    >
      <span>{{ data }}</span>
      <div :style="{ 'background-image': `url(/pichture/${index}.png)`}"></div>
   </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commodname: [
        "热品推荐",
        "手机数码",
        "家用电器",
        "电脑办公",
        "个人清洁",
        "汽车生活",
        "男装",
        "女装",
      
      ],
    };
  },
  mounted() {
      let ob = new IntersectionObserver(
        (totalvalue) => {
          for (let value of totalvalue) {
          
            if (value.isIntersecting) {
              this.$store.commit('changeslideindex',value.target.__vnode.key) 
            }
          }
        },
        {
         
          threshold: 0.5,
        }
      );

      this.$refs.card.forEach((res) => ob.observe(res));
    
  },
  computed:{
    clickslideindex(){
        return this.$store.state.ClickOptionIndex
    }
  },
  watch:{
    clickslideindex(){
        this.$refs.card[this.clickslideindex].scrollIntoView({behavior:'smooth'})
    }
  }
};
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 573px;
  overflow: scroll;
  .message {
    span {
      
      display: block;
      text-align: left;
      font-weight: bold;
      margin: 15px 15px;
    }
    div {
      width: 100%;
      height: 200px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      transform: scale(1.1);
    }
  }
}
</style>
